<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<title>支付</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<style>
		/* 支付页面样式 */
		.pay-page {
			min-height: calc(100vh - 200px);
			background: linear-gradient(135deg, #f6f9fc 0%, #ffffff 100%);
			padding: 60px 0;
		}
		
		.pay-container {
			max-width: 1000px;
			margin: 0 auto;
			padding: 0 20px;
		}
		
		/* 卡片样式 */
		.pay-card {
			background: white;
			border-radius: 16px;
			box-shadow: 0 10px 30px rgba(0,0,0,0.04);
			padding: 40px;
			margin-bottom: 30px;
			border: 1px solid #edf2f7;
		}
		
		/* 标题样式 */
		.pay-title {
			color: #4CAF50;
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 30px;
			padding-bottom: 15px;
			border-bottom: 2px solid #f0fdf4;
			position: relative;
		}
		
		.pay-title::after {
			content: '';
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 60px;
			height: 2px;
			background: #4CAF50;
		}
		
		/* 表单样式 */
		.form-group {
			margin-bottom: 24px;
			display: flex;
			align-items: center;
			gap: 20px;
		}
		
		.form-label {
			min-width: 100px;
			color: #4CAF50;
			font-size: 15px;
			font-weight: 500;
		}
		
		.form-input {
			flex: 1;
			max-width: 400px;
			padding: 14px 18px;
			border: 2px solid #e8f5e9;
			border-radius: 12px;
			font-size: 15px;
			color: #2e7d32;
			transition: all 0.3s ease;
			background: #f8fdf9;
		}
		
		.form-input:focus {
			outline: none;
			border-color: #4CAF50;
			box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.1);
			background: white;
		}
		
		.form-input::placeholder {
			color: #a5d6a7;
		}
		
		/* 分隔线 */
		.divider {
			height: 2px;
			background: linear-gradient(to right, #e8f5e9 0%, #ffffff 100%);
			margin: 40px 0;
			border-radius: 2px;
		}
		
		/* 订单信息样式 */
		.order-info {
			background: #f8fdf9;
			padding: 20px 24px;
			border-radius: 12px;
			margin-bottom: 30px;
			border: 1px solid #e8f5e9;
		}
		
		.order-info p {
			margin: 0 0 10px 0;
			color: #2e7d32;
			font-size: 15px;
			line-height: 1.6;
		}
		
		.order-info p:last-child {
			margin-bottom: 0;
		}
		
		.order-info strong {
			color: #1b5e20;
			font-weight: 600;
		}
		
		.order-info .amount {
			color: #4CAF50;
			font-size: 18px;
			font-weight: 600;
		}
		
		/* 支付方式样式 */
		.payment-methods {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 24px;
			margin-top: 24px;
		}
		
		.payment-method {
			background: white;
			border: 2px solid #e8f5e9;
			border-radius: 16px;
			overflow: hidden;
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
		}
		
		.payment-method:hover {
			border-color: #4CAF50;
			transform: translateY(-2px);
			box-shadow: 0 8px 20px rgba(76, 175, 80, 0.15);
		}
		
		.payment-method img {
			width: 100%;
			height: auto;
			display: block;
			transition: transform 0.3s ease;
		}
		
		.payment-method:hover img {
			transform: scale(1.05);
		}
		
		.payment-method::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.1) 100%);
			pointer-events: none;
			opacity: 0;
			transition: opacity 0.3s ease;
		}
		
		.payment-method:hover::after {
			opacity: 1;
		}
		
		/* 响应式调整 */
		@media (max-width: 768px) {
			.pay-page {
				padding: 40px 0;
			}
			
			.pay-card {
				padding: 30px 20px;
				border-radius: 12px;
			}
			
			.pay-title {
				font-size: 20px;
				margin-bottom: 25px;
			}
			
			.form-group {
				flex-direction: column;
				align-items: flex-start;
				gap: 8px;
			}
			
			.form-label {
				min-width: auto;
			}
			
			.form-input {
				width: 100%;
				max-width: none;
				padding: 12px 16px;
			}
			
			.payment-methods {
				grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
				gap: 16px;
			}
			
			.order-info {
				padding: 16px 20px;
			}
		}
	</style>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>
	<script type="text/javascript" src="js/cart.js"></script>
</head>
<body>
	
	<jsp:include page="header.jsp"/>
	
	<div class="pay-page">
		<div class="pay-container">
			<div class="pay-card">
				<h2 class="pay-title">确认收货信息</h2>
				<form action="pay" method="post" id="payform">
					<input type="hidden" name="id" value="${order.id}">
					<input type="hidden" name="paytype" id="paytype">
					
					<div class="form-group">
						<label class="form-label">收货人</label>
						<input type="text" 
							   class="form-input" 
							   name="name" 
							   value="${user.name}" 
							   placeholder="请输入收货人姓名" 
							   required 
							   id="fname">
					</div>
					
					<div class="form-group">
						<label class="form-label">收货电话</label>
						<input type="tel" 
							   class="form-input" 
							   name="phone" 
							   value="${user.phone}" 
							   placeholder="请输入收货电话" 
							   required 
							   id="fphone">
					</div>
					
					<div class="form-group">
						<label class="form-label">收货地址</label>
						<input type="text" 
							   class="form-input" 
							   name="address" 
							   value="${user.address}" 
							   placeholder="请输入收货地址" 
							   required 
							   id="faddress">
					</div>
				</form>
				
				<div class="divider"></div>
				
				<h2 class="pay-title">选择支付方式</h2>
				<div class="order-info">
					<p>订单编号: <strong>${order.id}</strong></p>
					<p>支付金额: <span class="amount">¥${order.total}</span></p>
				</div>
				
				<div class="payment-methods">
					<div class="payment-method" onclick="dopay(1)">
						<img src="images/wechat.jpg" alt="微信支付">
					</div>
					<div class="payment-method" onclick="dopay(2)">
						<img src="images/alipay.jpg" alt="支付宝支付">
					</div>
					<div class="payment-method" onclick="dopay(3)">
						<img src="images/offline.jpg" alt="货到付款">
					</div>
				</div>
			</div>
		</div>
	</div>

	<jsp:include page="footer.jsp"/>
	
<script type="text/javascript">
	function dopay(paytype){
		// 信息校验
		var name = $("#fname").val();
		if(name==null || name==""){
			layer.msg("请正确填写收货人!");
			return;
		}
		var phone = $("#fphone").val();
		if(phone==null || phone=="" || !/^[0-9]*$/.test(phone)){
			layer.msg("请正确填写收货电话!");
			return;
		}
		var address = $("#faddress").val();
		if(address==null || address==""){
			layer.msg("请正确填写收货地址!");
			return;
		}
		
		$("#paytype").val(paytype);
		$("#payform").submit();
	}
</script>

</body>
</html>